<template>
  <div class="record-fenxi">
    <div class="center-class">
      <div class="center-class-first">
        <thirdComponent></thirdComponent>
      </div>
      <div class="center-class-line"></div>
      <div class="center-class-second">
        <forthComponent></forthComponent>
      </div>
    </div>
    <div class="line"></div>
  </div>
</template>
<script>
import thirdComponent from './thirdComponent.vue'
import forthComponent from './forthComponent'
export default {
  components: {
    thirdComponent,
    forthComponent
  }
}
</script>

<style scoped lang="less">
.record-fenxi {
  height: 95%;

  .top-class {
    height: 75%;
    background: white;
    box-sizing: border-box;
    box-shadow: 0px 0px 8px 0px #ccc;
    display: flex;
    flex-direction: column;

    .titles {
      color: #0f6d40;
      font-size: 23px;
      height: 60px;
      line-height: 60px;
      margin-left: 20px;
      cursor: pointer;
    }

    .top-content {
      flex: 1;
      display: flex;

      .top-content-first {
        height: 97%;
        flex: 0 0 55%;
        background: white;
      }

      .top-content-line {
        flex: 0 0 20px;
      }

      .top-content-second {
        height: 100%;
        flex: 1;
        background: #0f6d40;
      }
    }
  }

  .center-class {
    height: 100%;
    display: flex;

    .center-class-first {
      flex: 0 0 55%;
    }

    .center-class-line {
      flex: 0 0 20px;
    }

    .center-class-second {
      flex: 1;
    }
  }

  .bottom-class {
    box-shadow: 0px 0px 8px 0px #ccc;
    margin-top: 20px;
    height: 50%;
  }

  .line {
    height: 20px;
  }
}
</style>